<template>
	<view class="fun-flex-col page">
		<view class="fun-flex-col group">
			<view class="fun-flex-col">
				<text class="fun-self-start font_2 text_3">Confirmation of identity</text>
				<text class="fun-self-start font text_4">Your username</text>
				<text class="fun-self-start text_5">{{username}}</text>
				
				<view class="fun-self-stretch divider"></view>
				<view class="fun-flex-col fun-items-start fun-self-stretch group_2 view">
					<text class="font">Your old password</text>
					<input class="fun-mt-14 font_3" v-model="queryData.oldPassword" placeholder="Enter Your old password" type='text'/>
				</view>
				<view class="fun-flex-row fun-self-stretch group_3">
					<text class="text_6">Forgot your old password?</text>
					<text class="fun-ml-4 text_7" @click="forget">Retrieve password.</text>
				</view>
			</view>
			<view class="fun-flex-col group_4">
				<text class="fun-self-start font_2 text_8">Set a new password</text>
				<view class="fun-flex-col fun-self-stretch mt-9">
					<view class="fun-flex-col fun-items-start fun-mt-16 group_2">
						<text class="font">Your new password</text>
						<input class="fun-mt-14 font_3" v-model="queryData.newPassword" placeholder="Enter Your new password" type='text'/>
					</view>
				</view>
				
				<view class="fun-flex-col fun-self-stretch mt-9">
					<view class="fun-flex-col fun-items-start fun-mt-16 group_2">
						<text class="font">Repeat new password</text>
						<input class="fun-mt-14 font_3" v-model="queryData.repeatPassword" placeholder="Repeat Your new password" type='text'/>
					</view>
				</view>
			</view>
		</view>
		
		<view class="fun-flex-col fun-justify-start fun-items-center text-wrapper" @click="confirm">Confirm</view>
	</view>
</template>

<script>
	import md5 from '@/js_sdk/js-md5/src/md5.js';
	import {changePwd} from "@/api/common.js"
	export default {
		data() {
			return {
				queryData:{
					oldPassword:'',
					newPassword:'',
					repeatPassword:''
				},
				username:''
			};
		},
		
		onLoad() {
			const userInfo = uni.getStorageSync("userInfo") || {};
			this.username = userInfo?.username;
		},

		methods: {
			confirm(){
				if(!this.queryData.oldPassword){
					this.UTILS.logStr("Enter Your old password");
					return
				}
				if(!this.queryData.newPassword){
					this.UTILS.logStr("Enter Your new password");
					return
				}
				if(!this.queryData.repeatPassword){
					this.UTILS.logStr("Repeat Your new password");
					return
				}
				if(this.queryData.newPassword !== this.queryData.repeatPassword){
					this.UTILS.logStr("Two passwords are inconsistent");
					return
				}
				const params = {
					oldPassword:md5(this.queryData.oldPassword),
					newPassword:md5(this.queryData.newPassword),
					repeatPassword:md5(this.queryData.repeatPassword)
				}
				changePwd(params).then(res => {
					if(res.code == 0){
						uni.navigateTo({url:`/url:'/pages/login/success?tips=You have successfully changed your login password&btnText=DONE&backUrl=/pages/more/setting',`})
					}
					else{
						this.UTILS.logStr(res.msg || "修改密码失败")
					}
				})
			},
			forget(){
				uni.navigateTo({url:`/pages/login/retrive`})
			}
		},
	};
</script>

<style scoped lang="scss">
	.ml-5 {
		margin-left: 10rpx;
	}

	.mt-9 {
		margin-top: 18rpx;
	}

	.page {
		padding: 32rpx 32rpx 72rpx 32rpx;
		background-color: #ffffff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;

		.group {
			height: calc(100% - 45px);
			.font_2 {
				font-size: 36rpx;
				font-family: SF Pro Display;
				font-weight: 700;
				color: #000000;
			}

			.text_4 {
				margin-top: 32rpx;
			}

			.text_5 {
				margin-top: 40rpx;
				color: #121212;
				font-size: 32rpx;
				font-family: Poppins;
				letter-spacing: -0.32rpx;
			}

			.divider {
				margin-top: 12rpx;
				background-color: #d9d9d9;
				height: 2rpx;
			}

			.group_2 {
				padding: 8rpx 0 24rpx;
				border-bottom: solid 2rpx #d9d9d9;

				&:first-child {
					margin-top: 0;
				}

				.font_3 {
					width: 100%;
					font-size: 32rpx;
					font-family: SF Pro Display;
					letter-spacing: -0.32rpx;
					color: #121212;
				}
			}

			.view {
				margin-top: 20rpx;
			}

			.group_3 {
				padding: 28rpx 4rpx 0;

				.text_6 {
					color: #979797;
					font-size: 24rpx;
					font-family: SF Pro Display;
				}

				.text_7 {
					color: #175bae;
					font-size: 24rpx;
					font-family: Roboto;
				}
			}

			.group_4 {
				margin-top: 48rpx;
			}
		}
		
		.text-wrapper {
			margin: 0 24rpx;
			padding: 24rpx 0 28rpx;
			background-color: #1a7b99;
			border-radius: 8rpx;
			color: #ffffff;
			font-size: 28rpx;
			font-family: SF Pro Display;
			font-weight: 700;
		}

		.font {
			font-size: 32rpx;
			font-family: SF Pro Display;
			letter-spacing: -0.32rpx;
			color: #3e3e3e;
		}
	}
</style>